<template>
	<view class="bg">
		<view class="info" v-for="(item, index) in dataArr" :key="index" @click="toXq(item)">
			<view class="info_header">
				<view>{{ item.itemCode_dictText }}</view>
				<view :style="getTypeColor(item.overdueStatus)">{{ item.overdueStatus=== '0' ? '未处理': "已处理" }}</view>
			</view>
			
			<view class="item">
				<view>责任单位</view>
				<view>{{ item.resDept_dictText }}</view>
			</view>
			<view class="item">
				<view>流程名称</view>
				<view>{{ item.subProcessCode_dictText}}</view>
			</view>
			<view class="item">
				<view>节点名称</view>
				<view>{{ item.nodeName }}</view>
			</view>
			<view class="item">
				<view>经办人</view>
				<view>{{ item.operator_dictText }}</view>
			</view>
			<view class="item">
				<view>责任人</view>
				<view>{{ item.resUser_dictText }}</view>
			</view>
			<view class="item">
				<view>逾期天数</view>
				<view>{{ item.overdueTime }}（天）</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText"></u-loadmore>
	</view>
</template>

<script>
	import { expectList } from "@/request/zdxm.js"
	export default {
		data() {
			return {
				nowPage: 1,
				status: 'loadmore',
				dataArr: [],
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			};
		},
		onLoad() {
			this.expectList()
		},
		onReachBottom() {
			this.status = 'loading';
			this.nowPage++
			this.expectList()
		},
		methods: {
			expectList() {
				expectList({
					pageNo: this.nowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.dataArr = [...this.dataArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.status = 'nomore'
					}
					// console.log('预期预警',this.dataArr)
				})
			},
			getTypeColor(type) {
				if (type === '0') {
					return "backgroundColor:rgba(248, 95, 120, 0.1);color:rgba(248, 95, 120, 1);";
				}
				if (type === '1') {
					return "backgroundColor:rgba(48, 116, 255, 0.1);color:rgba(48, 116, 255, 1);";
				}
			},
			getStateColor(state) {
				if (state === '0') {
					return "backgroundColor:rgba(248, 95, 120, 1);color:#fff;";
				}
				if (state === '1') {
					return "backgroundColor:rgba(250, 173, 51, 1);color:#fff;";
				}
			},
			toXq(X) {
				uni.navigateTo({
					url: "/pages/zdxm/xmgl/xq/xq?id="+ X.itemCode,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	

		.info {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
			border-radius: 8rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			padding: 40rpx 24rpx;

			.info_header {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: flex-start;

				view:nth-child(1) {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #272b32;
				}

				view:nth-child(2) {
					text-align: center;
					min-width: 120rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					border-radius: 4rpx;
					padding: 8rpx 16rpx;
				}
			}

			.state {
				display: inline-block;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				border-radius: 4rpx;
				padding: 8rpx 16rpx;
				margin-top: 20rpx;
			}

			.item {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 18rpx;

				view:nth-child(1) {
					width: 140rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8e9cb3;
				}

				view:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #272b32;
				}
			}
		}
</style>
